<template>
  <el-row id="cpts-warn-rule">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>

    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>告警规则</span>
        <el-button @click="handlerAdd" :disabled="!isViewEdit" style="float: right; padding: 6px 6px;" type="primary">添加<i class="el-icon-plus el-icon--right"></i></el-button>
      </div>

      <!--条件栏-->
     <!-- <el-row class="condition-layout">
        <span>时间类型:</span>
        <el-select v-model="timeTypeValue" placeholder="请选择">
          <el-option
            v-for="item in timeTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
          :type="pickerType"
          :value-format="dateFormat"
          @change="onPickerChange"
          v-model="selectDate"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-row>-->

      <!--表格栏-->
      <el-row class="table-layout">
        <el-table
          :data="tableDatas"
          max-height="580"
          header-align="center"
          style="width: 100%">
          <el-table-column
            prop="alarmName"
            label="规则名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="alarmLevel"
            align="center"
            label="级别">
          </el-table-column>
          <el-table-column
            prop="alarmDescription"
            align="center"
            label="规则描述">
          </el-table-column>
          <el-table-column
            :formatter="runStatusFormatter"
            prop="operateStatus"
            align="center"
            label="运行状态">
          </el-table-column>
        <!--  <el-table-column
            prop="incrementElectricity"
            align="center"
            label="关联场景的数量">
          </el-table-column>-->
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button :disabled="!isViewEdit" @click="handlerEdit(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
              <el-button :disabled="!isViewEdit" v-if="!scope.row.operateStatus" @click="handlerOprate(scope.$index, scope.row)" type="text" size="small">启动</el-button>
              <el-button :disabled="!isViewEdit" v-else @click="handlerOprate(scope.$index, scope.row)" type="text" size="small">停止</el-button>
              <el-button :disabled="!isViewEdit" @click="handlerDelete(scope.$index, scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-row>

      <!--分页栏-->
      <el-row class="pagination-layout">
        <el-pagination
          layout="prev, pager, next"
          :total="paginationCount"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="onPageChange">
        </el-pagination>
      </el-row>

    </el-card>

    <!--新增/编辑弹窗-->
    <el-dialog :visible.sync="isAddDialogShow">
      <el-row slot="title">
        <span style="font-size: 18px">新增/编辑</span>
        <el-button @click="addNewWarnRule" style="margin-left: 760px; padding: 6px 10px" type="primary" :loading="false">提交</el-button>
      </el-row>
      <el-row class="add-dialog-content">
        <el-form :model="addForm" >
          <el-form-item label="规则名称:">
            <el-input v-model="addForm.alarmName" placeholder="请输入规则名称"></el-input>
          </el-form-item>
          <el-form-item label="规则描述:">
            <el-input type="textarea" :rows="3" v-model="addForm.alarmDescription" placeholder="请输入规则描述"></el-input>
          </el-form-item>
          <el-form-item label="告警级别:">
            <el-select v-model="addForm.alarmLevel" placeholder="请选择告警级别">
              <el-option
                v-for="item in warnTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联策略:">
            <el-select v-model="addForm.ruleId" placeholder="请选择策略">
              <el-option
                v-for="item in ruleTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-row>
    </el-dialog>

  </el-row>
</template>

<script>
  export default {
    name: "warnRule",
    data(){
      return {
        isViewShow: false,
        isViewEdit: false,
        activeName:'1',
        timeTypeOptions:[{label:'年',value:1},{label:'月',value:2},{label:'日',value:3},{label:'供水时间段',value:4}],
        timeTypeValue: 3,
        pickerType:'date',
        dateFormat: 'yyyy-MM-dd',
        selectDate: new Date(),
        tableDatas:[],
        paginationCount: 0,
        currentPage:1,
        pageSize:10,
        isAddDialogShow: false,
        addForm:{
          alarmName: '',
          alarmDescription: '',
          alarmLevel: '',
          ruleId: '',
        },
        warnTypeOptions:[{label:"1",value:1},{label:"2",value:2},{label:"3",value:3},{label:"4",value:4},{label:"5",value:5}],
        ruleTypeOptions:[],
      }
    },
    mounted(){
      let obj = this.validateGlobal.getPermission(13)
      this.isViewShow = obj.isViewShow
      this.isViewEdit = obj.isViewEdit
      this.askLists()
    },
    methods:{
      runStatusFormatter: function(row, column){
        if(row.operateStatus){
          return '运行中'
        } else {
          return '未启动'
        }
      },
      resetForm: function(){
        this.addForm = {
          alarmName: '',
          alarmDescription: '',
          alarmLevel: '',
          ruleId: '',
        }
      },
      handlerAdd: function(){
        this.resetForm()
        if (this.isAddDialogShow) {
          this.isAddDialogShow = false
        }else{
          this.isAddDialogShow = true
        }
        this.askUnBindList()
      },
      handlerEdit: function(index,row){
        if (this.isAddDialogShow) {
          this.isAddDialogShow = false
        }else{
          this.isAddDialogShow = true
        }
        this.addForm = row
      },
      handlerOprate: function(index,row){
        this.addForm = row
        this.addForm.operateStatus = !row.operateStatus
        this.addNewWarnRule()
      },
      handlerDelete: function(index,row){
        let _that = this
        let gateway = sessionStorage.getItem("gateway")
        let url = _that.ports.warnManage.delete

        this.http.postForm(url,{
          alarmId: row.alarmId
        }, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.$message('删除成功!');
            _that.askLists()
          }else{
            _that.$message('删除失败!');
          }
        })
      },
      onPickerChange: function(date){
        this.selectDate = date
        // TODO
      },
      onPageChange: function(currentPage){
        this.currentPage = currentPage;
        this.askLists()

      },
      addNewWarnRule: function(){
        let _that = this
        let gateway = sessionStorage.getItem("gateway")
        let url = _that.ports.warnManage.save
        _that.addForm.sn = gateway
        this.http.postForm(url,_that.addForm, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            _that.$message('新增/编辑成功!');
            _that.isAddDialogShow = false
            _that.askLists()
          }else{
            _that.$message('新增/编辑失败!');
          }
        })

      },
      askUnBindList: function(){    // 未绑定的策略
        let _that = this
        let gateway = sessionStorage.getItem("gateway")
        let url = _that.ports.ruleManage.unbindList
        let askData = {
          sn: gateway,
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            if (res.data) {
              let arry = []
              for (let i = 0; i < res.data.length; ++i) {
                 arry.push({label: res.data[i].name,value:res.data[i].ruleId})
              }
              _that.ruleTypeOptions = arry
            }
          }else{
            _that.$message('列表获取失败!');
          }
        })

      },
      askLists: function () {
        let _that = this
        let gateway = sessionStorage.getItem("gateway")
        let url = _that.ports.warnManage.warnRuleList
        let askData = {
          sn: gateway,
          current: _that.currentPage,
          size: _that.pageSize,
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
             _that.tableDatas = res.data.records
             _that.paginationCount = res.data.total
          }else{
            _that.$message('列表获取失败!');
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  #cpts-warn-rule{

    .el-select{
      width: 100%;
    }

    .el-card{
      margin: 20px 20px 0 20px;
      height: 770px;

      .condition-layout{

      }

      .table-layout{
         margin-top: 20px;
      }

      .pagination-layout{
        text-align: center;
        margin-top: 10px;
      }


    }

    .evc-dialog-itemize{
      > :first-child.el-row{
        margin-top: 10px;
        margin-bottom: 20px;
      }
    }

    .evc-submit-layout{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
</style>
